<template>
  <div class="settings-options">
    <div v-if="!isLogin">
      <el-dropdown @command="handleCommand" trigger="click">
        <span>
          <el-tooltip effect="dark" content="点击登录" placement="bottom">
            <Avatar :src="userIconUrl" type="none"/>
          </el-tooltip>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="login">登录</el-dropdown-item>
          <el-dropdown-item command="register" disabled>注册</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div v-if="isLogin">
      <el-dropdown @command="handleCommand" trigger="click">
        <span>
          <el-tooltip effect="dark" :content="userName" placement="bottom">
            <Avatar :src="userIconUrl" :type="TIM.TYPES.CONV_C2C" />
          </el-tooltip>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="showMyProfile">个人资料</el-dropdown-item>
          <el-dropdown-item command="settings" disabled>设置</el-dropdown-item>
          <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'SettingsOptions',
  computed: {
    ...mapState({
      isLogin: state => state.user.isLogin,
      currentUserProfile: state => state.user.currentUserProfile
    }),
    userIconUrl(){
      // 若用户没有头像，则显示默认头像，在Avatar.vue里判断
      return this.currentUserProfile.avatar;
    },
    userName(){
      return this.currentUserProfile.nick || this.currentUserProfile.userID;
    }
  },
  methods:{
    handleCommand(command){
      switch(command){
        case 'login':
          this.login();
          break;
        case 'showMyProfile':
          this.showMyProfile();
          break;
        case 'logout':
          this.logout();
          break;
      }
    },
    logout(){
      this.$store.dispatch('logout');
    },
    login(){
      this.$store.commit('toggleIsLoginItemVisible',true);
    },
    showMyProfile(){
      this.$store.commit('toggleIsMyProfileItemVisible',true);
    }
  }
}
</script>

<style scoped>
.settings-options{
  width: 60px;
  height: 60px;
}
.settings-options .avatar{
  width: 40px;
  height: 40px;
}
</style>